<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('用户列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 设备信息
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="contro()"
                   title="设备控制"><i
                        class="fa fa-edit"></i></a>

                <a type="button" class="btn btn-box-tool" href="#" onclick="viewSeeing()"
                   title="能见度"><i
                        class="fa fa-bar-chart"></i></a>
                <input type="hidden" id="simId">

            </div>
        </div>
        <div class="ui-layout-content">
            <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col width="200">
                    <col>
                </colgroup>

                <tbody>
                <tr>
                    <td>设备名称</td>
                    <td id="name"></td>
                </tr>
                <tr>
                    <td>sim卡号</td>
                    <td id="sim"></td>
                </tr>
                <tr>
                    <td>道路名称</td>
                    <td id="roadName"></td>
                </tr>
                <tr>
                    <td>经度</td>
                    <td id="lng"></td>
                </tr>
                <tr>
                    <td>纬度</td>
                    <td id="lat"></td>
                </tr>
                <tr>
                    <td>能见度</td>
                    <td id="visibility"></td>
                </tr>
                <tr>
                    <td>雷达限速</td>
                    <td id="speedLimit"></td>
                </tr>
                <tr>
                    <td>电池电压</td>
                    <td id="voltage"></td>
                </tr>
                <tr>
                    <td>工作模式</td>
                    <td id="workPattern"></td>
                </tr>

                <tr>
                    <td>子工作模式</td>
                    <td id="workSubPattern"></td>
                </tr>
                <tr>
                    <td>最后更新时间</td>
                    <td id="last_update_time"></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td id="state"></td>
                </tr>


                </tbody>
            </table>

        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div" id="container-div">

    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0Beta&key=d19985748ed6359fec0e5ebed166064e"></script>
<script th:inline="javascript">
    const equipmentList = [[${equipmentList}]];
    console.log("-----设备列表------")
    console.log(equipmentList)

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 400});
        //初始化地图
        var map = new AMap.Map('container-div', {
            resizeEnable: true,
            center: [116.397428, 39.90923],
            zoom: 13
        });
        map.clearMap();  // 清除地图覆盖物
        //查询所有设备,标记在地图上
        var markers = [];
        for (var i = 0; i < equipmentList.length; i++) {
            var marker = {};
            var position = [];

            position.push(equipmentList[i].lng);
            position.push(equipmentList[i].lat);
            marker.position = position;
            marker.info = equipmentList[i];

            markers.push(marker);
        }
        console.log(markers)
        markers.forEach(function (marker) {
            new_marker = new AMap.Marker({
                map: map,
                icon: marker.icon,
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(-13, -30),

            });


            new_marker.content = marker.info;
            new_marker.on('click', markerClick);

        });
        //自适应显示多个标记点
        map.setFitView();

        //点标记点击事件
        function markerClick(e) {
            var info = e.target.content;
            $("#simId").val(info.id);
            $("#name").text(info.name);

            $("#sim").text(info.sim);
            $("#voltage").text(info.voltage);
            $("#roadName").text(info.roadName);
            $("#visibility").text(info.visibility);
            $("#speedLimit").text(info.speedLimit);
            if (info.workPattern = "0") {
                $("#workPattern").text("关闭");
            }
            if (info.workPattern = "1") {
                $("#workPattern").text("手动");
            }
            if (info.workPattern = "2") {
                $("#workPattern").text("自动");
            }

            if (info.state == "0") {
                $("#state").text("在线");
            } else {
                $("#state").text("离线");
            }

            $("#last_update_time").text(info.updateTime);
            $("#lng").text(info.lng);
            $("#lat").text(info.lat);
            if (info.workSubPattern = "0") {
                $("#workSubPattern").text("道路强化");
            }
            if (info.workSubPattern = "1") {
                $("#workSubPattern").text("主动诱导");
            }
            if (info.workSubPattern = "2") {
                $("#workSubPattern").text("防止追尾");
            }

        }


    });

    function contro() {
        var simId = $("#simId").val()
        if (simId == "") {
            $.modal.msgError("请选择一个设备")
            return;
        }

        var url = ctx + "equipment/equipment" + "/edit/" + simId
        window.location.href = url;

    }

    function viewSeeing() {
        var sim = $("#sim").text();
        if (sim == "") {
            $.modal.msgError("请选择一个设备")
            return;
        }
        window.location.href = ctx + "visibility/visibility/query/" + sim;
    }


</script>

</body>

</html>